<template>
  <div>
    <a-card style="margin-bottom: 10px">
      <a-row>
        <a-col :span="24">
          <a-form
            layout="inline"
            :form="form"
            @submit="handleSubmit"
          >
            <!-- <a-form-item label="参数编码">
              <a-input
                allow-clear
                placeholder="请输入参数编码"
                v-model="code"
              ></a-input>
            </a-form-item>
            <a-form-item label="参数编码名称">
              <a-input
                allow-clear
                placeholder="请输入参数编码名称"
                v-model="name"
              ></a-input>
            </a-form-item>
             <a-form-item label="分组">
              <a-input
                allow-clear
                placeholder="请输入分组"
                v-model="groupCode"
              ></a-input>
            </a-form-item>
             <a-form-item label="备注">
              <a-input
                allow-clear
                placeholder="请输入备注"
                v-model="remark"
              ></a-input>
            </a-form-item> -->
            <a-form-item>
              <a-button
                type="primary"
                html-type="submit"
              >搜索</a-button>

            </a-form-item>
          </a-form>
        </a-col>
      </a-row>
    </a-card>
    <a-card>
      <a-table
        bordered
        :loading="loading"
        :pagination="pagination"
        :columns="columns"
        :data-source="dataSource"
        :scroll="{x: 1500}"
        @change="handleTableChange"
      >

        <span
          slot="category"
          slot-scope="txt, record"
        >
          <span v-if="record.category == 10">
            辅料列表下载
          </span>
          <span v-if="record.category == 20">
            面料档案批量导入
          </span>
        </span>
        <span
          slot="percent"
          slot-scope="txt, record"
        >
          <a-progress :percent="(record.successCount/record.totalCount)*100" />
        </span>
        <span
          slot="type"
          slot-scope="txt, record"
          style="margin-left:5px"
        >
          <span v-if="record.type == 10">
            下载
          </span>
          <span v-if="record.type == 20">
            上传
          </span>

        </span>
        <span
          slot="status"
          slot-scope="txt, record"
          style="margin-left:5px"
        >
          <span v-if="record.status == 10">
            新建
          </span>
          <span v-if="record.status == 20">
            正在处理
          </span>
          <span v-if="record.status == 30">
            处理结束
          </span>
        </span>
      </a-table>
      <create
        v-if="showAdd"
        :sysParamId="sysParamId"
        @close="close"
      ></create>
    </a-card>
  </div>
</template>

<script>
import { postAction } from '@/api/manage'

const columns = [
  {
    width: 80,
    title: '任务id',
    dataIndex: 'taskId',
    fixed: 'left'
  },
  {
    title: '业务分类',
    width: 150,
    dataIndex: 'category',
    scopedSlots: { customRender: 'category' }
  },
  {
    title: '创建时间',
    width: 200,
    dataIndex: 'createDate'
  },
  {
    title: '上传时文件地址',
    width: 450,
    dataIndex: 'filePath'
  },

  {
    title: '存储文件地址',
    width: 450,
    dataIndex: 'storagePath'
  },
  {
    title: '成功处理条数',
    width: 120,
    dataIndex: 'successCount'
  },
  {
    title: '总条数',
    width: 80,
    dataIndex: 'totalCount'
  },
  {
    title: '处理进度',
    width: 200,
    scopedSlots: { customRender: 'percent' }
  },
  {
    title: '类型',
    width: 70,
    scopedSlots: { customRender: 'type' }
  },
  {
    title: '状态',
    width: 100,
    scopedSlots: { customRender: 'status' }
  }
]
export default {
  components: {},
  data() {
    return {
      columns,
      urlKey: 'basemgt-material/',
      form: this.$form.createForm(this),
      showAdd: false,
      name: '',
      code: '',
      groupCode: '',
      remark: '',
      loading: false,
      dataSource: [],
      auth: [],
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '40'],
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: total => `共 ${total} 条记录`,
        itemRender: (current, type, originalElement) => {
          if (type === 'prev') {
            return <a>上一页</a>
          } else if (type === 'next') {
            return <a>下一页</a>
          }
          return originalElement
        }
      }
    }
  },
  mounted() {
    this.loadData()
    // this.getAuth()
  },
  computed: {
    jobNumber() {
      return this.$store.getters.userInfo.workNo || ''
    }
  },
  methods: {
    handleTableChange(pagination) {
      this.pagination = pagination
      this.loadData()
    },
    close() {
      this.showAdd = false
      this.loadData()
    },
    add(record) {
      this.showAdd = true
      this.sysParamId = record.sysParamId
    },
    reset() {
      this.groupName = ''
      this.distributeChannel = ''
      this.retailDistribution = ''
      this.loadData()
    },
    handleSubmit(e) {
      e.preventDefault()
      this.loadData(1)
    },
    getAuth() {
      const params = {
        pageCode: 'material_color',
        jobNumber: this.jobNumber
      }
      postAction(`${this.urlKey}account/auth`, params).then(res => {
        if (res.code == 200) {
          this.auth = res.data
        }
      })
    },

    deleteRecord(record) {
      const params = {
        sysParamId: record.sysParamId,
        jobNumber: this.jobNumber
      }
      try {
        postAction(`${this.urlKey}sysParam/delete`, params).then(res => {
          if (res.code == 200) {
            this.$message.success('删除成功')
            this.loadData()
          } else {
            this.$message.warning(res.msg)
          }
        })
      } catch (error) {
        this.$message.warning('删除失败！')
      }
    },
    loadData(key) {
      this.loading = true
      const params = {
        category: 20,
        size: this.pagination.pageSize,
        type: 20,
        current: this.pagination.current,
        jobNumber: this.jobNumber
      }
      if (key) {
        params.current = 1
      }
      try {
        postAction(`${this.urlKey}excel/task/page`, params).then(res => {
          if (res.code == 200) {
            if (!key) {
              this.dataSource = res.data.records
            } else {
              res.data.records.map(x => {
                this.dataSource.map(y => {
                  if (x.taskId == y.taskId) {
                    y.successCount = x.successCount
                    y.totalCount = x.totalCount
                    y.status = x.status
                  }
                })
              })
            }
            this.dataSource.map(item => {
              if (item.status !== 30) {
                setTimeout(() => {
                  this.loadData(1)
                }, 2000)
              }
            })
            this.pagination.total = res.data.total
          } else {
            this.$message.warning(res.msg || res.message)
          }
        })
      } catch (error) {
        this.$message.warning('获取列表失败！')
      } finally {
        this.loading = false
      }
    }
  }
}
</script>
